<!-- 虚拟券领取记录 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="onReset" searchConditionNum="6">
        <gz-text-up v-model:value="searchData['virtualCouponId']" :placeholder="'虚拟券ID'" />
        <gz-text-up v-model:value="searchData['activityId']" :placeholder="'活动ID'" />
        <a-form-item class="table-search-item">
          <a-select v-model:value="searchData['isUse']" :placeholder="'是否已使用'">
            <a-select-option :value="0">未使用</a-select-option>
            <a-select-option :value="1">已使用</a-select-option>
          </a-select>
        </a-form-item>
      </GzSearchForm>

      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'isUse'">
            <a-badge v-if="record.isUse === 0" status="processing" text="未使用"></a-badge>
            <a-badge v-if="record.isUse === 1" status="success" text="已使用"></a-badge>
          </template>
          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <GzTableColumns>
              <a-button type="link" danger>删除</a-button>
            </GzTableColumns>
          </template>
        </template>
      </GzTable>
    </a-card>
  </page-header-wrapper>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from 'vue'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

const infoTableRef = ref()
let tableColumns = reactive([
  { key: 'virtualCouponId', title: '虚拟券ID',dataIndex: 'virtualCouponId',fixed: 'left', width: 200, minWidth: 150, maxWidth: 250 },
  { key: 'activityId', title: '活动ID',dataIndex: 'activityId', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'isUse', title: '是否已使用', dataIndex: 'isUse', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'operation', title: '操作', dataIndex: 'operation',width: 260, fixed: 'right', align: 'center' }
])

const searchData = ref({})

// 请求table接口数据
function reqTableDataFunc(params: any) {
  return new Promise(resolve=>{
    resolve({
      total: 3,
      records: [
        {
          virtualCouponId: 'V999999',
          activityId: 'A111111111',
          isUse: 0,
        },{
          virtualCouponId: 'V555555555',
          activityId: 'A999955555555',
          isUse: 1,
        }
      ]
    })
  })
}

function searchFunc() {
  infoTableRef.value.refTable(true)
}

function onReset() {
  searchData.value = {}
}
</script>
